/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Cell, Table, TableBody, TableHead, TableRow, Text,
} from "customize-easy-ui-component";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import {config元件, items元件, } from "./editPresCm";
import { useRep2hTableViewerX, } from "../../hook/useRepTableEditor";
import TableHeaderSlash from "../../common/TableHeaderSlash";
import {DirectLink} from "../../../routing/Link";

//遇到跨页的效果不好：就不用两个行的表头，拆解成两个部分。
export const PressureComponentsVw = ({orc, rep, children}: { orc: any, rep: any, children?: React.ReactNode; }
) => {
  //报错：Cannot access 'EntranceSetup' before initialization就因为import {config适装} from "../../movable/tanker/orcBase";
  //无法用<CCell ref={boundary} > Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
  return <>
    <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}}}>
      <Text id='PressureComponents' variant="h2" css={{
        textAlign: 'center', marginTop: '1rem',
      }}>主要受压元件情况</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["%"] }  tight miniw={800} css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}}>
      <TableBody>
        <TableRow>
          <Cell css={{display: 'flex'}}>
            <Text  css={{display: 'inline-flex',flex: '1 1 60%',justifyContent:'center'}}>主要受压元件情况表</Text>
            <Text>（单位：mm）</Text>
          </Cell>
        </TableRow>
      </TableBody>
    </Table>
    <Table fixed={ ["4.2%", "12%", "10%", "16%", "10%",  "12%", "10%","%", "10%"] } tight miniw={800}
                            css={{borderCollapse: 'collapse', }}>
      <TableHead>
        <TableRow>
          <TableHeaderSlash/>
          {config元件.map(([title, _2, _1], i: number) => {
            return <CCell key={i}>{title}</CCell>;
          })}
          {config元件.map(([title, _2, _1], i: number) => {
            return <CCell key={i}>{title}</CCell>;
          })}
        </TableRow>
      </TableHead>
      <TableBody>
        { (new Array(6)).fill(null).map((_, w: number) => {
            return <DynamicItemsVw key={w} baseSeq={w} rep={rep} orc={orc}/>;
          })
        }
      </TableBody>
    </Table>
    {children}
    <TailMenRowIspCheck orc={orc} rep={rep}/>
  </>;
};

const DynamicItemsVw= ( { orc, baseSeq,rep} : { orc: any,baseSeq:number,rep:any}
) => {
  const table= items元件[baseSeq][0]+'表';
  const editor= items元件[baseSeq][2];
  const rowsMore = useRep2hTableViewerX({table:table,embed:items元件[baseSeq][1], config:config元件, orc});
  //key报错  Object.assign(modifyNode,{ key: 'W'+insertIdx });
  return (<React.Fragment key={baseSeq}>
      <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/${editor===2? 'OverheatingSys':'PressureComponents'}?original=1#PressureComponents${baseSeq+1}`}>
          {rowsMore}
      </DirectLink>
      </React.Fragment>
  );
};
